import 'package:flutter/material.dart';
import 'package:lejiaxueche/config/colors.dart';
import '../utils/methods.dart';

class AppBarComponent extends AppBar {
  AppBarComponent({
    Key key,
    String title,
    List<Widget> actions,
    Widget leading,
    double elevation = 0.2,
    Color backgroundColor,
    int titleColor = AppColors.darkColor333,
    bool centerTitle = true
  }) : super(
    key: key,
    title: Text(
      title == null ? '' : title, 
      style: TextStyle(color: Color(titleColor), fontSize: 14.0)
    ),
    backgroundColor: backgroundColor == null ? Color(AppColors.whitefff) : backgroundColor,
    elevation: elevation,
    actions: actions,
    leading: leading,
    centerTitle: centerTitle
  );
}

// 城市选项导航栏
class AppBarWithCities extends StatefulWidget implements PreferredSizeWidget {
  final String title;
  final double height;
  final double tabHeight;
  final Widget leading;
  final List<Widget> actions;
  final Widget tabs;
  
  AppBarWithCities({
    Key key,
    this.title,
    this.height: 40.0,
    this.tabHeight: 0.0,
    this.leading,
    this.actions,
    this.tabs
  }) : assert(title != null), 
       super(key: key);
  
  @override
  _AppBarWithCitiesState createState() => _AppBarWithCitiesState();

  @override
  Size get preferredSize => Size.fromHeight(height+tabHeight);
}

class _AppBarWithCitiesState extends State<AppBarWithCities> {
  TabController tabController;

  @override
  void initState() { 
    super.initState();
    tabController = TabController(length: 2, vsync: AnimatedListState());
  }

  Widget buildAppBar() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: widget.height,
      padding: EdgeInsets.only(
        left: 10.0,
        right: 10.0
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Image.asset(
                'assets/pages/exam/calendar.png',
                width: 25.0,
                height: 23.0,
              ),
              Column(
                children: <Widget>[
                  SizedBox(height: 20.0,),
                  Text(
                    '28',
                    style: TextStyle(color: Color(AppColors.assistBlue), fontSize: 11.0),
                  )
                ],
              )
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(widget.title, textAlign: TextAlign.center, style: TextStyle(fontSize: 16.0)),
              SizedBox(width: 6.0),
              Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Text('合肥市', style: TextStyle(fontSize: 11.0),),
                  Image.asset('assets/icons/arrow_down.png', width: 14.0, height: 14.0)
                ],
              )
            ],
          ),
          Stack(
            alignment: Alignment.topRight,
            children: <Widget>[
              Image.asset('assets/pages/exam/tips.png', width: 23.0, height: 23.0),
              ClipRRect(
                borderRadius: BorderRadius.all(const Radius.circular(4.0)),
                child: Container(
                  width: 8.0,
                  height: 8.0,
                  color: Colors.red
                )
              )
            ],
          )
        ],
      )
    );
  }

  Widget buildSliverAppBar() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: widget.tabHeight,
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      child: widget.tabs
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: widget.height + widget.tabHeight + MediaQuery.of(context).padding.top,
      padding: EdgeInsets.only(
        top: MediaQuery.of(context).padding.top
      ),
      color: Colors.white,
      child: Column(
        children: <Widget>[
          buildAppBar(),
          buildSliverAppBar()
        ],
      ),
    );
  }
}

// 左中右三段式导航栏
class AppBarWith3Part extends StatefulWidget implements PreferredSizeWidget {
  final Widget content;
  final Widget action;
  final double height;
  final Color color;
  final bool back;

  AppBarWith3Part({
    this.content,
    this.action,
    this.height: 40.0,
    this.color: Colors.white,
    this.back: false
  });
  
  @override
  _AppBarWith3PartState createState() => _AppBarWith3PartState();

  @override
  Size get preferredSize => Size.fromHeight(height);
}

class _AppBarWith3PartState extends State<AppBarWith3Part> {
  // 是否显示返回按钮
  Widget showBack() {
    Widget back = GestureDetector(
      onTap: () {
        Navigator.pop(context);
      },
      child: Container(
        width: fitSize(100),
        height: widget.height,
        color: widget.color,
        child: Row(
          children: <Widget>[
            Image.asset(
              'assets/icons/back.png',
              width: fitSize(45),
              height: fitSize(45),
            )
          ],
        ),
      ),
    );
    Widget empty = Container(
      width: fitSize(100),
      height: widget.height,
    );
    return widget.back == true ? back : empty;
  }

  // 是否显示action按钮
  Widget showAction() {
    Widget action = Container(
      width: fitSize(100),
      height: widget.height,
      child: widget.action,
      alignment: Alignment.centerRight
    );
    Widget empty = Container(
      width: fitSize(100),
    );
    return widget.action != null ? action : empty;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: widget.height + MediaQuery.of(context).padding.top,
      padding: EdgeInsets.only(
        left: 10.0,
        right: 10.0,
        top: MediaQuery.of(context).padding.top
      ),
      decoration: BoxDecoration(
        color: widget.color,
        border: Border(
          bottom: BorderSide(
            color: Theme.of(context).primaryColor,
            width: 0.8
          )
        )
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          showBack(),
          widget.content,
          showAction()
        ],
      ),
    );
  }
}